function my$(id){
	return document.getElementById(id);
}
function cl$(cla){
	return document.querySelector(cla);
}

var flag =true;
var pull = document.querySelector(".pullDown");
var rahmen = my$("rahmen");//相框
var ulObj = rahmen.children[0];
var list = ulObj.children;
var imgWidth = rahmen.offsetWidth; 
var pic =1;
//克隆一个ul中第一个li,加入到ul中的最后=====克隆
ulObj.appendChild(ulObj.children[0].cloneNode(true));
my$("province").addEventListener("click",function(){
	if(flag){
		my$("pro").innerHTML="广东";
		shenfeng();
		flag = false;
		my$("list").style.opacity ="0";
		my$("list2").style.opacity ="1";

	}else{
		my$("pro").innerHTML="海南";
		chusheng();
			
		my$("list").style.opacity ="1";
		my$("list2").style.opacity ="0";
		flag = true;
	}
	if(pic==2){
		console.log(1345)
		pic=1;
		ulObj.style.left ="0px";
	}else{
		animate(ulObj,-imgWidth*pic);
		pic++;
	}
})

//省份进入动画
function shenfeng(){
	var json1 = {"top": -500, };//韶关
	animate1(cl$(".shaog"),json1);
	var json2 = {"top": -500, };//梅州
	animate1(cl$(".meizhou"),json2);
	var json3 = {"top": -500, };//河源
	animate1(cl$(".heyuan"),json3);
	var json4 = {"top": -180, };//清远
	animate1(cl$(".qingyuan"),json4);
	var json5 = {"top": -180, };//广州
	animate1(cl$(".guangzhou"),json5);
	var json6 = {"top": -180, };//潮州
	animate1(cl$(".chaozhou"),json6);
	var json7 = {"top": -180, };//肇庆
	animate1(cl$(".zhaoqing"),json7);
	var json8 = {"top": -180, };//佛山
	animate1(cl$(".foshan"),json8);
	var json9 = {"top": -180, };//东莞
	animate1(cl$(".dongguan"),json9);
	var json10 = {"top": -180, };//惠州
	animate1(cl$(".huizhou"),json10);
	var json11 = {"top": -180, };//汕尾
	animate1(cl$(".shanwei"),json11);
	var json12= {"top": -180, };//揭阳
	animate1(cl$(".jieyang"),json12);
	var json13= {"top": -180, };//汕头
	animate1(cl$(".shantou"),json13);
	var json14= {"top": -180, };//深圳
	animate1(cl$(".shenzhen"),json14);
	var json15= {"top": -180, };//中山
	animate1(cl$(".zhongshan"),json15);
	var json16= {"top": -180, };//珠海
	animate1(cl$(".zhuhai"),json16);
	var json17= {"top": -180, };//江门
	animate1(cl$(".jiangmen"),json17);
	var json18= {"top": -180, };//阳江
	animate1(cl$(".yangjiang"),json18);
	var json19= {"top": -180, };//茂名
	animate1(cl$(".maoming"),json19);
	var json20= {"top": -180, };//湛江
	animate1(cl$(".zhanjiang"),json20);
	var json21 = {"top": -16, };//海口
	animate1(cl$(".haiko"),json21);
	var json22 = {"top": 180, };//三亚
	animate1(cl$(".sanya"),json22);
}
//省份移除
function chusheng(){
	var json1 = {"top": 16, };//韶关
	animate1(cl$(".shaog"),json1);
	var json2 = {"top": 11, };//梅州
	animate1(cl$(".meizhou"),json2);
	var json3 = {"top": 27, };//河源
	animate1(cl$(".heyuan"),json3);
	var json4 = {"top": 28, };//清远
	animate1(cl$(".qingyuan"),json4);
	var json5 = {"top": 58, };//广州
	animate1(cl$(".guangzhou"),json5);
	var json6 = {"top": 35, };//潮州
	animate1(cl$(".chaozhou"),json6);
	var json7 = {"top": 58, };//肇庆
	animate1(cl$(".zhaoqing"),json7);
	var json8 = {"top": 73, };//佛山
	animate1(cl$(".foshan"),json8);
	var json9 = {"top": 71, };//东莞
	animate1(cl$(".dongguan"),json9);
	var json10 = {"top": 60, };//惠州
	animate1(cl$(".huizhou"),json10);
	var json11 = {"top": 62, };//汕尾
	animate1(cl$(".shanwei"),json11);
	var json12= {"top": 57, };//揭阳
	animate1(cl$(".jieyang"),json12);
	var json13= {"top": 66, };//汕头
	animate1(cl$(".shantou"),json13);
	var json14= {"top": 83, };//深圳
	animate1(cl$(".shenzhen"),json14);
	var json15= {"top": 82, };//中山
	animate1(cl$(".zhongshan"),json15);
	var json16= {"top": 95, };//珠海
	animate1(cl$(".zhuhai"),json16);
	var json17= {"top": 94, };//江门
	animate1(cl$(".jiangmen"),json17);
	var json18= {"top": 106, };//阳江
	animate1(cl$(".yangjiang"),json18);
	var json19= {"top": 120, };//茂名
	animate1(cl$(".maoming"),json19);
	var json20= {"top": 140, };//湛江
	animate1(cl$(".zhanjiang"),json20);
	var json21 = {"top": -500, };//海口
	animate1(cl$(".haiko"),json21);
	var json22 = {"top": -500, };//三亚
	animate1(cl$(".sanya"),json22);
}
chusheng();

//剩余5000套
var tao = setInterval(function(){
	var word = my$("tao").innerHTML;
	word-=50;
	my$("tao").innerHTML=word;
	if(word<5000){
		clearInterval(tao);
		my$("tao").innerHTML=5000;
	}
},1)








  //设置任意的一个元素,移动到指定的目标位置
  function animate(element, target) {
    clearInterval(element.timeId);
    //定时器的id值存储到对象的一个属性中
    element.timeId = setInterval(function () {
      //获取元素的当前的位置,数字类型
      var current = element.offsetLeft;
      //每次移动的距离
      var step = 10;
      step = current < target ? step : -step;
      //当前移动到位置
      current += step;
      if (Math.abs(current - target) > Math.abs(step)) {
        element.style.left = current + "px";
      } else {
        //清理定时器
        clearInterval(element.timeId);
        //直接到达目标
        element.style.left = target + "px";
      }
    }, 10);
  }
  

  function getStyle(element, attr) {
    return window.getComputedStyle ? window.getComputedStyle(element, null)[attr] : element.currentStyle[attr] || 0;
  }


  function animate1(element, json, fn) {
    clearInterval(element.timeId);//清理定时器
    //定时器,返回的是定时器的id
    element.timeId = setInterval(function () {
      var flag = true;//默认,假设,全部到达目标
      //遍历json对象中的每个属性还有属性对应的目标值
      for (var attr in json) {
        //判断这个属性attr中是不是opacity
        if (attr == "opacity") {
          //获取元素的当前的透明度,当前的透明度放大100倍
          var current = getStyle(element, attr) * 100;
          //目标的透明度放大100倍
          var target = json[attr] * 100;
          var step = (target - current) / 10;
          step = step > 0 ? Math.ceil(step) : Math.floor(step);
          current += step;//移动后的值
          element.style[attr] = current / 100;
        } else if (attr == "zIndex") { //判断这个属性attr中是不是zIndex
          //层级改变就是直接改变这个属性的值
          element.style[attr] = json[attr];
        } else {
          //普通的属性
          //获取元素这个属性的当前的值
          var current = parseInt(getStyle(element, attr));
          //当前的属性对应的目标值
          var target = json[attr];
          //移动的步数
          var step = (target - current) / 10;
          step = step > 0 ? Math.ceil(step) : Math.floor(step);
          current += step;//移动后的值
          element.style[attr] = current + "px";
        }
        //是否到达目标
        if (current != target) {
          flag = false;
        }
      }
      if (flag) {
        //清理定时器
        clearInterval(element.timeId);
        //所有的属性到达目标才能使用这个函数,前提是用户传入了这个函数
        if (fn) {
          fn();
        }
      }
      //测试代码
//    console.log("目标:" + target + ",当前:" + current + ",每次的移动步数:" + step);
    }, 20);
  }
  

